<template>
  <div>
    <div class="info-top">
      <h2>基本信息</h2>
      <div class="user-btn-status">
        <span class="btn-user-r el-icon-edit-outline" v-hasPermi="['system:custom:edit']" @click="eidtDetail()">编辑</span>
      </div>
    </div>
    <div class="info-header">
      <el-row :gutter="10">
        <el-col :span="8">
          <p class="info-deader-line">
            <span class="line-title">客户名称</span>
            {{ customData ? customData.name : '' }}
          </p>
        </el-col>
        <el-col :span="8">
          <p class="info-deader-line">
            <span class="line-title">负责人</span>
            {{ customData ? customData.contacts : '' }}
          </p>
        </el-col>
        <el-col :span="8">
          <p class="info-deader-line">
            <span class="line-title">联系电话</span>
            {{ customData ? customData.phone : '' }}
          </p>
        </el-col>
        <el-col :span="8">
          <p class="info-deader-line">
            <span class="line-title">纳税人识别号</span>
            {{ customData ? customData.invoiceCode : '' }}
          </p>
        </el-col>
        <el-col :span="8">
          <p class="info-deader-line">
            <span class="line-title">开户行</span>
            {{ customData ? customData.bank : '' }}
          </p>
        </el-col>
        <el-col :span="8">
          <p class="info-deader-line">
            <span class="line-title">账号</span>
            {{ customData ? customData.bankName : '' }}
          </p>
        </el-col>
        <el-col :span="8">
          <p class="info-deader-line">
              <span class="line-title">区域</span>
          </p>
        </el-col>
        <el-col :span="8">
          <p class="info-deader-line">
            <span class="line-title">地址详情</span>
            {{ customData ? customData.address : '' }}
          </p>
        </el-col>
      </el-row>
    </div>
    <detailEdit :visible.sync="showDetail" :customId="paramId" @getDetail="getDetail"></detailEdit>
  </div>
</template>

<script>
import {listProjectType} from "@/api/system/project";
import {getCustom} from '@/api/system/custom.js'
import {getDept} from "@/api/system/dept";
import detailEdit from "./detailEdit";

export default {
  name: "infoPoint",
  components: {detailEdit},
  dicts: ['sys_stagnation_type', 'sys_post_nature', 'sys_purchase_type', 'sys_deposit_type', 'sys_deposit_status'],
  props: ['paramId', 'customData'],
  data() {
    return {
      detailVisible: false,
      projectType: {},
      userData: null,
      compayData: null,
      param: null,
      showDetail: false
    }
  },
  created() {

  },
  watch: {
    projectData() {
      // this.getProjectType()
      // this.getUserDetail()
      // this.getCompanyDetail()
    }
  },
  methods: {
    eidtDetail() {
      this.showDetail = true
    },
    closePoint() {
      this.$message.error('暂未开放')
    },
    getList() {
      this.$emit('getPointFn')
    },
    editPoint() {
      this.zhudianVisible = true
    },
    // 项目类型/类别 listProjectType
    getProjectType() {
      listProjectType(this.queryParams).then(response => {
        let projectType = {}
        for (let item of response.rows) {
          projectType[item.id] = item
        }
        this.projectType = projectType;
      });
    },
    // 家纺详情
    getUserDetail() {
      getCustom(this.projectData.customId).then(res => {
        this.userData = {
          id: Number(res.data.id),
          name: res.data.name
        }
      })
    },
    // 公司详情
    getCompanyDetail() {
      getDept(this.projectData.companyId).then(res => {
        this.compayData = {
          deptId: res.data.deptId,
          deptName: res.data.deptName
        }
      })
    },
    getDetail(){
      this.$emit('getPointFn')
    }
  }
}
</script>

<style scoped>
.info-top {
  display: flex;
  align-items: center;
}

.info-top h2 {
  font-size: 16px;
  flex: 1;
}

.user-btn-status {
  border: 1px solid #ddd;
  font-size: 12px;
  display: flex;
  align-items: center;
  border-radius: 15px;
  overflow: hidden;
}

.info-header {
  border-bottom: 1px solid #f4f4f4;
}

.info-header h3 {
  font-size: 14px;
}

.info-deader-line {
  font-size: 12px;
  display: flex;
  align-items: center;
}

.line-title {
  color: rgba(0, 0, 0, .3);
  font-size: 12px;
  display: block;
  width: 120px;
  padding-left: 10px;
}

.user-btn-status span {
  cursor: pointer;
  padding: 0 20px;
  height: 30px;
  display: block;
  line-height: 30px;
}

.user-btn-status span:first-child {
  border-right: 1px solid #ddd;
}

.user-btn-status span:hover {
  background: #f8f8f8;
}

.points-map-box {
  height: 300px;
  width: 100%;
  background: #f4f4f4;
}

.points-map {
  height: 300px;
  width: 100%;
}

.info-deader-map {
  display: flex;
}
</style>
